/*
 * experimentplate.qml 实验反应版配置
 */
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15

Item {
    id: expPlate

    /* property 定义开始 */
    // 信号
    signal nextPage(); // 切换到下一页
    signal prevPage(); // 切换到上一页
    /* property 定义结束 */

    TabbarNav {
        id: tabNav
        width: parent.width
        isEnable: true
        title: "新建实验"
        z: 999

        onReturnSig: {
            console.log("tabbar nav")
        }
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 0

        // 主体部分
        Rectangle {
            id: mainPart
            Layout.fillWidth: true
            Layout.preferredHeight: parent.height - btnContainer.height
            Layout.alignment: Qt.AlignTop

            // 背景
            Rectangle {
                anchors.fill: parent
                LinearGradient {
                    anchors.fill: parent
                    start: Qt.point(0, 0)
                    end: Qt.point(0, height)
                    gradient: Gradient {
                        GradientStop {position: 0.0; color: "#007BD8"}
                        GradientStop {position: 1.0; color: "#001A5A"}
                    }
                }
            }

            // 左右箭头按钮
            Rectangle {
                width: 50
                height: 50
                color: "transparent"
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                z: 999

                RightArrowButton {
                    id: rightarw
                    anchors.fill: parent
                    onClicked: expPlate.nextPage() // 切换到下一页
                }
            }

            Rectangle {
                width: 50
                height: 50
                color: "transparent"
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                z: 999

                LeftArrowButton {
                    id: leftarw
                    anchors.fill: parent
                    onClicked: expPlate.prevPage() // 切换到上一页
                }
            }

            // 内容
            Rectangle {
                id: contentCon
                color: "transparent"
                // color: "red"
                anchors.leftMargin: 16
                anchors.rightMargin: 16
                anchors.topMargin: 75
                anchors.bottomMargin: 14
                anchors.fill: parent

                GridLayout {
                    id: contentGrid
                    anchors.fill: parent
                    columns: 2 // 双列Grid布局
                    columnSpacing: 16
                    rowSpacing: 16

                    // 反应版
                    Rectangle {
                        id: plateContainer
                        Layout.minimumWidth: 716
                        Layout.minimumHeight: 563
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        color: "transparent"

                        PlateTableView {
                            visible: false
                            anchors.fill: parent
                        }

                        PlateTableViewTwo {
                            anchors.fill: parent
                        }
                    }

                    // 侧边选项
                    Rectangle {
                        id: sideChoices
                        Layout.preferredWidth: 216
                        Layout.preferredHeight: 600
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        Layout.rowSpan: 2
                        radius: 12
                        color: "#C3FFFFFF"

                        ColumnLayout {
                            anchors.fill: parent
                            anchors.margins: 16
                            spacing: 15

                            // 样本名称
                            LabelComboBox {
                                id: sampleName
                                Layout.fillWidth: true
                                Layout.preferredHeight: comboBoxHeight + getLabelSize()[1]
                                Layout.alignment: Qt.AlignTop
                                labelPosition: GLOBAL.LabelPosition.Top // 修改标签位置
                                comboBoxWidth: width
                                comboBoxHeight: 40
                                comboBoxText: "样本名称"
                                boxFontPixelSize: 17
                                model: ["Sample 01"]
                            }

                            // 样本类型
                            LabelComboBox {
                                id: sampleType
                                Layout.fillWidth: true
                                Layout.preferredHeight: comboBoxHeight + getLabelSize()[1]
                                Layout.alignment: Qt.AlignTop
                                labelPosition: GLOBAL.LabelPosition.Top // 修改标签位置
                                comboBoxWidth: width
                                comboBoxHeight: 40
                                comboBoxText: "样本类型"
                                boxFontPixelSize: 17
                                model: ["标准品"]
                            }

                            // 浓度
                            LabelTextInput {
                                id: nongDu
                                Layout.fillWidth: true
                                Layout.preferredHeight: inputHeight + getLabelSize()[1]
                                Layout.alignment: Qt.AlignTop
                                labelPosition: GLOBAL.LabelPosition.Top // 修改标签位置
                                inputWidth: width
                                inputHeight: 40
                                labelFontPixelSize: 17
                                defaultInputText: "0.02"
                                labelText: "浓度"

                            }

                            // 通道
                            Rectangle {
                                id: tongDao
                                Layout.fillWidth: true
                                Layout.fillHeight: true
                                Layout.alignment: Qt.AlignTop
                                Layout.preferredHeight: 105
                                // color: "#8000FF00"
                                color: "transparent"

                                ColumnLayout {
                                    anchors.fill: parent
                                    spacing: 3

                                    // 文字
                                    Label {
                                        id: tongDaoText
                                        Layout.fillWidth: true
                                        font.pixelSize: 16
                                        font.family: "Alibaba PuHuiTi"
                                        color: "#222"
                                        text: "通道"
                                        horizontalAlignment: Text.AlignLeft
                                        verticalAlignment: Text.AlignVCenter
                                    }

                                    // 选框
                                    Rectangle {
                                        id: tongDaoCheckBoxes
                                        Layout.fillWidth: true
                                        Layout.preferredHeight:
                                            sideGridLayout.height + 30
                                        border.width: 1
                                        border.color: "#999"
                                        color: "#fff"
                                        radius: 4

                                        GridLayout {
                                            id: sideGridLayout
                                            width: parent.width
                                            columns: 2
                                            rows: 3
                                            rowSpacing: 8

                                            // 全部
                                            CustomCheckBox {
                                                id: allCheck
                                                Layout.fillWidth: true
                                                Layout.columnSpan: 2
                                                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
                                                Layout.leftMargin: 15
                                                Layout.topMargin: 15
                                                checkBoxText: "全部"
                                                checkWidth: 21
                                                checkHeight: 21
                                                checkRadius: 2
                                                checkedFillColor: "#FF2F42CD"
                                                checkBoxFontColor: "#FF222222"
                                                checkBorderColor: "#FF222222"
                                                checkedBorderColor: "transparent"
                                                isChecked: true
                                            }

                                            // FAM
                                            CustomCheckBox {
                                                id: famCheck
                                                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
                                                Layout.leftMargin: 15
                                                checkBoxText: "FAM"
                                                checkWidth: 21
                                                checkHeight: 21
                                                checkRadius: 2
                                                checkedFillColor: "#FF2F42CD"
                                                checkBoxFontColor: "#FFFF2B37"
                                                checkBorderColor: "#FF222222"
                                                checkedBorderColor: "transparent"
                                                isChecked: true
                                            }

                                            // VIC
                                            CustomCheckBox {
                                                id: vicCheck
                                                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
                                                checkBoxText: "VIC"
                                                checkWidth: 21
                                                checkHeight: 21
                                                checkRadius: 2
                                                checkedFillColor: "#FF2F42CD"
                                                checkBoxFontColor: "#FF422FCD"
                                                checkBorderColor: "#FF222222"
                                                checkedBorderColor: "transparent"
                                                isChecked: true
                                            }

                                            // ROX
                                            CustomCheckBox {
                                                id: roxCheck
                                                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
                                                Layout.leftMargin: 15
                                                checkBoxText: "ROX"
                                                checkWidth: 21
                                                checkHeight: 21
                                                checkRadius: 2
                                                checkedFillColor: "#FF2F42CD"
                                                checkBoxFontColor: "#FF00C441"
                                                checkBorderColor: "#FF222222"
                                                checkedBorderColor: "transparent"
                                                isChecked: true
                                            }

                                            // CY5
                                            CustomCheckBox {
                                                id: cy5Check
                                                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
                                                checkBoxText: "CY5"
                                                checkWidth: 21
                                                checkHeight: 21
                                                checkRadius: 2
                                                checkedFillColor: "#FF2F42CD"
                                                checkBoxFontColor: "#FFFF873E"
                                                checkBorderColor: "#FF222222"
                                                checkedBorderColor: "transparent"
                                                isChecked: true
                                            }

                                        }

                                    }

                                    CustomVerSpacerItem {}
                                }
                            }
                        }
                    }

                    // 统计信息
                    Rectangle {
                        id: stats
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        Layout.minimumHeight: 15
                        color: "transparent"

                        RowLayout {
                            anchors.fill: parent

                            Label {
                                font.pixelSize: 16
                                font.family: "Alibaba PuhuiTi"
                                text: qsTr("未知：1   标准：5   阴性：1")
                                color: "#FFF"
                                Layout.alignment: Qt.AlignLeft
                                verticalAlignment: Text.AlignVCenter
                            }
                        }
                    }
                }
            }
        }

        // 按钮部分
        Rectangle {
            id: btnContainer
            Layout.fillWidth: true
            Layout.preferredHeight: 80
            Layout.topMargin: 20
            Layout.bottomMargin: 20
            Layout.leftMargin: 16
            Layout.rightMargin: 16

            RowLayout {
                width: parent.width
                anchors.left: parent.left
                spacing: 8

                // 下一板按钮
                PureButton {
                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                    pureText: "下一板(N)"
                }

                // 清除按钮
                PureButton {
                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                    pureText: "清除(D)"
                }

                CustomHorSpacerItem {}

                // 保存按钮
                PureButton {
                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                    pureText: "保存(S)"
                }

                // 启动按钮
                GradientButton {
                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                    gradText: "启动(R)"
                }

            }

        }
    }
}
